<!--  -->
<template>
  <div id="app_Rolelist">
    <!------------------------------------------------ 头部----------------------------------------------- -->
    <div class="app_Rolelist_top">
      <div class="app_Rolelist_top_content">
        <section class="app_Rolelist_top_head">
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button @click="clear">重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </section>
        <section class="app_Rolelist_foot">
          <label style="width: 140px;">输入搜索：</label>
          <el-input v-model="input" placeholder="账号/姓名"></el-input>
        </section>
      </div>
    </div>
    <!-- --------------------------------------------中间------------------------------------------------------- -->
    <div class="app_Rolelist_center">
      <section class="app_Rolelist_center_content">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <el-button>添加</el-button>
      </section>
    </div>
    <!-- -----------------------------------------------底部 -------------------------------------------->
    <div class="app_Rolelist_bottom">
      <div class="app_Rolelist_bottom_content">
        <!-- 表格 -->
        <el-table
          :data="
            rolelist.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          style="width: 100%"
        >
          <!-- 1 -->
          <el-table-column prop="num" label="编号" align="center">
          </el-table-column>
          <!-- 2 -->
          <el-table-column prop="authority" label="角色名称" align="center">
          </el-table-column>
          <!-- 3 -->
          <el-table-column prop="describe" label="描述" align="center">
          </el-table-column>
          <!-- 4 -->
          <el-table-column prop="account" label="用户" align="center">
          </el-table-column>
          <!-- 5 -->
          <el-table-column prop="startttiem" label="添加时间" align="center">
          </el-table-column>
          <!-- 6 -->
          <!-- 7 -->
          <el-table-column prop="yeson" label="是否启用" align="center">
            <template slot-scope="scope"><el-switch v-model="scope.row.on" 
            on-color="#00A854"
            on-text="启动"
            on-value="true"
            off-color="#F04134"
            off-text="禁止"
            off-value="false"> </el-switch></template>
            <el-switch v-model="value"> </el-switch>
          </el-table-column>
          <!-- 8 -->
          <el-table-column prop="option" label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <span
                  ><el-button type="text" @click="role"
                    ><a href="javascript:void(0);">分配菜单</a
                    ><a href="javascript:void(0);">分配资源</a></el-button
                  ></span
                >
              </div>
              <div>
                <span>
                  <el-button type="text" @click="open"
                    ><a href="javascript:void(0);">编辑</a></el-button
                  >
                  <el-button type="text"
                    ><a
                      href="javascript:void(0);"
                      @click="deleteuser(scope.row.account)"
                      >删除</a
                    ></el-button
                  >
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- -----------分页器 ------------------------------->
        <div
          class="block"
          style="margin:20px 0 50px 0; display:flex;justify-content: flex-end;"
        >
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="rolelist.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableData: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 3, // 每页的数据条数
      input: "",
      value: true,
      rolelist: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    clear() {
      this.input = "";
    },
    /* ---------------------------查询搜索----------------- */
    // searchrole(){
    //   // key是搜索的关键字；后台接口也需要定义这个字段
    //   this.$axios.post("http://49.233.65.169:3000/api/queryuser",{ username: this.input })
    //   .then( res => { 
    //     // 数据请求成功后的返回
    //    console.log(res); 
    //    this.userlist = res.data;
    //   })
    //   .catch(error => {
    //     // 请求错误的返回
    //     console.log(error);
    //   })
    // },
    /* -------------------------------------分页器 ---------------------------*/
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    /* ------------------------------------编辑---------------------------- */
    open() {
      this.$alert(
        '<textarea rows="8" cols="40" style="margin-left:40px"></textarea>',
        "编辑 :",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    /* ----------------------------------分配角色------------------------------ */
    role() {
      this.$alert(
        '<select style="width:300px; height:30px;margin-left:45px"> <option value ="商品管理员">商品管理员</option> <option value ="订单管理员">订单管理员</option><option value ="超级管理员">超级管路员</option></select>',
        "分配角色",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    /* --------------------------------------删除--------------------------------------------------------------- */
    async deleteuser(account) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async (res) => {
        await axios
          .post("http://49.233.65.169:3000/api/deleteuser", {
            account: account,
          })
          .then(function(response) {
            console.log(response);
            return response.data;
          })
          .catch(function(error) {
            console.log(error);
          });
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    this.rolelist = await axios
      .get("http://49.233.65.169:3000/api/userlist")
      .then((data) => {
        return data.data;
      });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
/* --------------------------头部--------------------------------- */
#app_Rolelist {
  margin: 20px;
  .app_Rolelist_top {
    border: 1px solid #ebeef5;
    color: #303133;
    .app_Rolelist_top_content {
      padding: 20px;
      .app_Rolelist_top_head {
        i.el-icon-search {
        }
        span {
          margin-right: 895px;
          margin-left: 10px;
          font-size: 16px;
        }
        el-button {
        }
      }
      .app_Rolelist_foot {
        margin-left: 50px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        width: 300px;
        label {
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
}
/* ----------------------------中间 ------------------------------*/
.app_Rolelist_center {
  border: 1px solid #ebeef5;
  color: #303133;
  margin-top: 20px;
  .app_Rolelist_center_content {
    padding: 20px;
    i.el-icon-tickets {
    }

    span {
      margin-right: 1000px;
      margin-left: 10px;
      font-size: 16px;
    }

    el-button {
    }
  }
}
/* -------------------------底部 --------------------------------------*/
.app_Rolelist_bottom {
  margin-top: 20px;
  .app_Rolelist_bottom_content {
    border: 1px solid #ebeef5;
    div {
      span {
        a {
          text-decoration: none;
          color: #409eff;
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
